<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品详情页</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4003170_subl4g1xu6j.css"
    />
    <link rel="stylesheet" href="../css/shangpinxiangqing.css" />
  </head>
  <body>
    <div id="detail"></div>
    <script src="../js/01ajax.js"></script>

    <script>
      // 地址：
      const baseUrl = "http://localhost:8888";
      // 获取div标签
      let detail = document.getElementById("detail");
      // id 获取网址中的商品id
      let id = location.search.split("=")[1];
      ajax({
        url: baseUrl + "/goods/item",
        type: "get",
        params: { id },
        fn(resData) {
          resData = JSON.parse(resData);
          console.log(resData);
          detail.innerHTML = `
          <header>
         <img src="../images/酒仙.png" alt="" />
        <p></p>
        <span class="iconfont icon-fangdajing"></span>
      </header>
          <div class="box">
        <img src="${resData.info.img_big_logo}" alt="" />
        <p>${resData.info.title}</p>
        <b><span style="margin:0 20px 0 0">￥ ${resData.info.price}</span><span>库存 ${resData.info.goods_number}</span></b>

        <input type="button" value="添加购物车" />
      </div>
      <div class="xiangxi">${resData.info.goods_introduce}</div>
          `;

          // 获取input标签
          let oInput = document.querySelector("input");
          // 给input标签添加点点击事件
          oInput.onclick = function () {
            // 调用ajax函数(携带参数为用户id和商品id)
            ajax({
              url: baseUrl + "/cart/add",
              type: "post",
              params: { id: localStorage.getItem("uid"), goodsId: id },
              author: true, // 验证请求头。
              fn(resData) {
                console.log(resData);
                resData = JSON.parse(resData);
                if (resData.code == 1) {
                  location.href = "05.购物车页面.html";
                }
              },
            });
          };
        },
      });
    </script>
  </body>
</html>
